import { useState } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Search, ArrowLeft, X } from "lucide-react";

interface Location {
  name: string;
  address: string;
  distance: number;
  city?: string;
}

interface LocationPickerProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSelect: (location: Location | null) => void;
  currentLocation?: Location | null;
}

export function LocationPicker({ open, onOpenChange, onSelect, currentLocation }: LocationPickerProps) {
  const [searchQuery, setSearchQuery] = useState("");

  // 模拟的位置数据
  const locations: Location[] = [
    {
      name: "金迪世纪大厦",
      address: "广东省深圳市南山区侨香路4018号",
      distance: 0,
      city: "深圳市",
    },
    {
      name: "侨城北(地铁站)",
      address: "广东省深圳市南山区2号线(8号线)",
      distance: 70.46,
      city: "深圳市",
    },
    {
      name: "港龙舞蹈(华侨城校区)",
      address: "广东省深圳市南山区侨香路天鹅湖花园三期华侨城欢乐时光3层06号",
      distance: 145.29,
      city: "深圳市",
    },
    {
      name: "盒马鲜生(欢乐时光店)",
      address: "广东省深圳市南山区侨香路天鹅湖花园三期OCT PARK华侨城欢乐时光B1层",
      distance: 145.45,
      city: "深圳市",
    },
  ];

  const formatDistance = (distance: number) => {
    if (distance === 0) return "";
    if (distance >= 1000) {
      return `${(distance / 1000).toFixed(1)}km`;
    }
    return `${Math.round(distance)}m`;
  };

  const filteredLocations = locations.filter(
    (location) =>
      location.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      location.address.toLowerCase().includes(searchQuery.toLowerCase()),
  );

  const handleHideLocation = () => {
    onSelect(null);
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md p-0 gap-0 bg-white" hideClose>
        <DialogHeader className="flex flex-row items-center justify-between p-4 border-b">
          <Button variant="ghost" size="icon" className="w-9 h-9" onClick={() => onOpenChange(false)}>
            <ArrowLeft className="h-5 w-5" />
          </Button>
          <DialogTitle className="flex-1 text-center text-base font-normal">所在位置</DialogTitle>
          <Button variant="ghost" size="icon" className="w-9 h-9" onClick={() => onOpenChange(false)}>
            <X className="h-5 w-5" />
          </Button>
        </DialogHeader>

        <div className="p-4 border-b">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              placeholder="搜索地点"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-9 bg-muted/50"
            />
          </div>
        </div>

        <div className="max-h-[60vh] overflow-y-auto">
          <button
            className="w-full px-4 py-3 text-left border-b hover:bg-muted/50 transition-colors"
            onClick={handleHideLocation}
          >
            <span className="text-base">不显示位置</span>
          </button>

          {filteredLocations.map((location, index) => (
            <button
              key={index}
              className="w-full px-4 py-3 text-left border-b hover:bg-muted/50 transition-colors"
              onClick={() => {
                onSelect(location);
                onOpenChange(false);
              }}
            >
              <div className="flex items-start justify-between gap-4">
                <div className="flex-1 min-w-0">
                  <h3 className="font-medium mb-1 truncate">{location.name}</h3>
                  <p className="text-sm text-muted-foreground truncate">{location.address}</p>
                </div>
                {location.distance > 0 && (
                  <span className="text-sm text-muted-foreground whitespace-nowrap">
                    {formatDistance(location.distance)}
                  </span>
                )}
              </div>
            </button>
          ))}
        </div>
      </DialogContent>
    </Dialog>
  );
}

